<template>
    <div class="LoginBG">
        <div class="LoginBorder">
            <img class="Login_Logo" :src="CSSMode ? lightimg : darkimg" alt="" />
            <p class="Login_Tittle">食链智控--管理端</p>
            <div class="Login_Main">
                <el-input v-model="username" class="el_input" placeholder="请输入管理员账号" :prefix-icon="User"></el-input>
                <el-input v-model="password" class="el_input" placeholder="请输入管理员密码" :prefix-icon="Lock"
                    show-password></el-input>
                <el-button @click="checkLogin" type="primary" class="el_button_primary">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang='js' name=''>
// 资源文件
import lightimg from "@/assets/img/Logo/Logo_light.png"
import darkimg from "@/assets/img/Logo/Logo_Dark.png"
import { User, Lock } from "@element-plus/icons-vue";
// api
import userLoginAPI from "@/api/login/login";
// utils
import { CheckInput } from "@/utils/checkUserInput";
// 运行依赖
import { ref, inject } from 'vue'
import router from "@/router";
import showMessage from "@/utils/showMessage";

const CSSMode = inject("CSSMode")
const username = ref("")
const password = ref("")

function checkLogin() {
    if (CheckInput(username.value, "请输入管理员账号") && CheckInput(password.value, "请输入管理员密码")) {
        userLogin()
    }
}
async function userLogin() {
    const res = await userLoginAPI(username.value, password.value)
    if (res.data.code == 200) {
        if (res.data.data) {
            console.log(res.data)
            showMessage("登录成功", "success")
            localStorage.setItem("SLZKName",res.data.data.name)
            localStorage.setItem("SLZKLoginFlag", true)
            localStorage.setItem("SLZKUserID", res.data.data.id)
            router.push("/home")
            // console.log(res)
        } else {
            showMessage("登录失败")
        }
    } else {
        showMessage("登录失败")
    }
}
</script>

<style scoped>
/* 主体框架 */
.LoginBG {
    position: fixed;
    width: 100%;
    height: 100%;
    animation-name: ani;
    animation-duration: 10s;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
}

@keyframes ani {
    from {
        background-color: var(--Login_backGround1);
    }

    to {
        background-color: var(--Login_backGround2);
    }
}

/* 内容框架 */
.LoginBorder {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo */
.Login_Logo {
    height: 150px;
    border-radius: 10px;
    margin-bottom: -30px;
}

/* 标题 */
.Login_Tittle {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    margin: 20px;
    color: var(--Login_Tittle) !important;
    transition: all 0.5s;
}

/* 输入框架 */
.Login_Main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 表单 */
.Login_Main>* {
    width: 350px;
    height: 40px;
}
</style>